<template>
  <div class="head">
    <el-menu
      :default-active="currentPath"
      router
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="min-width: 1300px">
      <el-menu-item style="margin-left: 170px">
      </el-menu-item>
        <span>
            <img src="../../assets/99.png" style="position: absolute;left: 0px;width: 200px;margin-top: -63px">
            <img src="../../assets/33.png" style="position: absolute;left: 60px;width: 200px;margin-top: -50px">
        </span>
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
      <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold"></span>
      <el-input
        placeholder="快速搜索..."
        prefix-icon="el-icon-search"
        size="medium"
        style="width: 300px;position:absolute;margin-top: 12px;right: 18%;color: #005cc5;"
        v-model="keywords">
      </el-input>
      <!--<span style="position: absolute;padding-top: 20px;right: 5%;font-size: 20px;font-weight: bold">欢迎您！ {{this.$store.state.username}}</span>-->
      <div class="nav-account" v-show="!isLogin">
        <a href="/login" class="nav-account-login">登录</a>
        <a href="/register" class="nav-account-reg">注册</a>
      </div>
      <div class="adatar" v-show="isLogin">
        <a href="">
        <div class="box-img">
        <img :src="adatar?adatar:require('../../assets/img/icon/peo1.png')" alt="" >
        </div>
        </a>
        <div class="profile-hover-wrapper">
          <div class="profile-hover-info"><span class="profile-hover-name">信院126546号</span><a class="profile-hover-btn" href="">个人主页</a></div>
          <div class="item-profile-box">
            <a class="item-profile" href=""><i class="hover-item-ico hover-item-ico1"></i>我的简历</a>
            <a class="item-profile" href=""><i class="hover-item-ico hover-item-ico2"></i>刷题</a>
            <a class="item-profile" href=""><i class="hover-item-ico hover-item-ico3"></i>学习</a>
            <a class="item-profile" href=""><i class="hover-item-ico hover-item-ico4"></i>笔记</a>
            <a class="item-profile" href=""><i class="hover-item-ico hover-item-ico5"></i>项目</a>
            <a class="item-profile" href=""><i class="hover-item-ico hover-item-ico6"></i>收藏</a>
          </div>
          <div class="hover-accout-wrapper">
            <a href=""><i class="hover-item-ico hover-accout-icon"></i>账号设置</a>
            <a class="nc-logout"><i class="hover-item-ico hover-accout-logout"></i>退出登录</a>
          </div>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'NavMenu',
    data () {
      return {
        isLogin: false,
        adatar:'',
        navList: [
          {name: '/index', navItem: '首页'},
          {name: '/news', navItem: '新闻资讯'},
          {name: '/talks', navItem: '讨论区'},
          {name: '/niuRen', navItem: '牛人堂'},
          {name: '/findRz',navItem: '个人中心'}
        ],
        dialogFormVisible: false,
        keywords: '',
        form: {
          uname: '',
          uaccount: '',
          uphone:'',
          delivery: false,
          uhead:''
        },
        formLabelWidth: '120px'
      }
    },
    methods:{
      goback(){
       var _this= this
      this.dialogFormVisible=true,
        this.$axios.post('/myDetails',).then(resp=>{
          this.form=resp.data.result[0]
          console.log(_this.form)
          console.log(_this.form.uphone)
        })
      },
      fileChange(e) {
        var that = this;
        var file = e.target.files[0];
        var reader = new FileReader();
        reader.onload = function(e){
          that.adatar  = e.target.result;
        }
        reader.readAsDataURL(file);
        var data = new FormData();
        data.appendTo('file',this.adatar);
        that.$axios.post("upload",data,{headers:{'Content-type':'multipart/from-data'}})
        .then(resp=>{
          alert(resp.data)
        })
      }
    },
    computed: {
      hoverBackground () {
        return '#ffd04b'
      },
      currentPath () {
        var x = this.$route.path.indexOf('/', 1)
        console.log(x)
        if (x !== -1) {
          return this.$route.path.substring(0, x)
        } else {
          return this.$route.path
        }
      }
    }
  }
</script>

<style scoped>
  .nav-account {
    background: #ff411c;
    border-radius: 20px;
    color: #fff;
    line-height: 24px;
    float: right;
    padding: 2px 0;
    margin: 12px 30px 0px 10px;
    white-space: nowrap;
  }
  .nav-account .nav-account-login {
    padding: 0 3px 0 20px;
  }
  .nav-account a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
  }
  .hover-accout-wrapper a:hover{
    color: #25BB9B;
  }
  .hover-accout-wrapper :hover{
    color: #25BB9B;
  }
  .item-profile:hover{
        border-radius: 5%;
        text-decoration: none;
        background-color: #F7F8F9;
  }
  .hover-accout-icon, .hover-accout-logout {
    display: inline-block!important;
    vertical-align: middle!important;
    width: 16px!important;
    height: 16px!important;
    margin-bottom: 0!important;
    margin-right: 10px!important;
    background-position: -153px 0!important;
  }
  .hover-item-ico1 {
    background-position: 0px 0;
  }
  .hover-item-ico2 {
    background-position: -24px 0!important;
  }
  .hover-item-ico3 {
    background-position: -48px 0!important;
  }
  .hover-item-ico4 {
    background-position: -72px 0!important;
  }
  .hover-item-ico5 {
    background-position: -96px 0!important;
  }
  .hover-item-ico6 {
    background-position: -120px 0!important;
  }
  .hover-accout-wrapper {
    border-top: 1px solid #e8eaed;
  }
  .hover-accout-wrapper a {
    color: #8a96a7;
    display: inline-block;
    width: 45%;
    padding: 15px 2% 10px;
    line-height: 1;
    text-decoration: none;
  }
  .profile-hover-wrapper .item-profile {
    display: inline-block;
    vertical-align: top;
    width: 77px;
    height: 58px;
    padding: 10px 0;
    color: #6f6f6f;
    line-height: 1;
    text-align: center;
    margin: 0 10px 0 0;
  }
  .item-profile-box {
    margin-right: -30px;
    text-align: left;
    padding: 10px 0;
  }
  .hover-item-ico {
    background: url(//static.nowcoder.com/images/img/home/icon-person.png) no-repeat;
    width: 24px;
    height: 22px;
    margin: 0 auto;
    margin-bottom: 10px;
    display: block;
  }
  .profile-hover-wrapper .profile-hover-btn, .profile-hover-wrapper .profile-hover-btn:hover {
    display: inline-block;
    border: 1px solid #25bb9b;
    padding: 4px 5px;
    font-size: 12px;
    float: right;
    border-radius: 4px;
    color: #25bb9b;
    line-height: 1;
    text-decoration: none;
  }
  .profile-hover-info {
    text-align: left;
    border-bottom: 1px solid #e8eaed;
    padding-bottom: 10px;
  }
  .box-img {
    margin-top: -90px;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 40px;
    height: 40px;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 50%;
  }
  .adatar:hover .profile-hover-wrapper{
    display: block;
  }

  .profile-hover-wrapper {
    display: none;
    position: absolute;
    right: 0;
    top: 54px;
    font-size: 14px;
    background: #fff;
    width: 265px;
    padding: 10px;
    box-shadow: 0 0 4px rgb(0 0 0 / 20%);
    border-radius: 4px;
    border: 1px solid #eee;
    z-index: 999;
  }
  .adatar {
    position: relative;
    width: 55px;
    height: 55px;
    left: 1280px;

  }
  img {
    width: 40px;
    display: block;
  }
  .button {
    position: absolute;
    top: 40px;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    opacity: 0;
    cursor: pointer;
     box-shadow: none;
  }
  button {
    margin-left: 10px;
    margin-top: 20px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 1px;
  }
  a{
    text-decoration: none;
    color: #333;
  }

  span {
    pointer-events: none;
  }

</style>
